<template>
  <div>
    <el-drawer
      :size='size'
      :title='title'
      :visible='dialog'
      :direction='direction'
      custom-class='fx-drawer'
      ref='drawer'
      @close='sendClose'
    >
      <div class='fx-drawer__content'>
        <el-form :model='ruleForm' :rules='rules' ref='ruleForm' label-width='100px' class='fx-ruleForm'>
          <el-form-item label='菜单类型：' prop='type'>
            <el-radio-group v-model='ruleForm.type' :disabled='disabledSubmit'>
              <el-radio :label='0'>一级菜单</el-radio>
              <el-radio :label='1'>子菜单</el-radio>
            </el-radio-group>
          </el-form-item>

          <el-form-item label='菜单名称：' prop='title'>
            <el-input v-model='ruleForm.title' size='medium' :readonly='disabledSubmit' />
          </el-form-item>

          <el-form-item v-if='ruleForm.type' label='上级菜单：' prop='parent'>

            <el-select
              style='width: 100%;'
              size='medium'
              v-model='ruleForm.parent'
              placeholder='请选择菜单'
              :disabled='disabledSubmit'
            >
              <el-option
                v-for='item in menus'
                :key='item.id'
                :value='item.title'>
              </el-option>
            </el-select>
          </el-form-item>

          <el-form-item label='访问路径：' prop='path'>
            <el-input v-model='ruleForm.path' size='medium' :readonly='disabledSubmit' />
          </el-form-item>

          <el-form-item label='路径名称：' prop='name'>
            <el-input v-model='ruleForm.name' size='medium' :readonly='disabledSubmit' />
          </el-form-item>

          <el-form-item label='前端组件：' prop='component'>
            <el-input v-model='ruleForm.component' size='medium' :readonly='disabledSubmit' />
          </el-form-item>

          <el-form-item label='菜单图标：' prop='icon'>
            <el-input v-model='ruleForm.icon' size='medium' :readonly='disabledSubmit'>
              <el-button @click='selectIcon' slot='append' icon='el-icon-setting' :disabled='disabledSubmit' />
            </el-input>
          </el-form-item>

          <el-form-item label='菜单排序：' prop='sort'>
            <el-input type='number' v-model='ruleForm.sort' size='medium' :readonly='disabledSubmit' />
          </el-form-item>

          <el-form-item label='是否禁用：' prop='disabled'>
            <el-switch :disabled='disabledSubmit' v-model='ruleForm.disabled' />
          </el-form-item>

          <div class='fx-drawer__footer'>
            <el-button size='medium' @click='sendClose'>取 消</el-button>
            <el-button :disabled='disabledSubmit' size='medium' :type='disabledSubmit?"":"primary"' @click='submitForm'>
              确 定
            </el-button>
          </div>
        </el-form>
      </div>
    </el-drawer>

    <el-dialog :visible.sync='dialogFormVisible' top='12%' width='44%'>
      <el-tabs v-model='activeName'>
        <el-tab-pane label='方向性图标' name='directivity'>
          <FxIconList @getIcon='getIcon' :icons='globalIcons.directivity' />
        </el-tab-pane>
        <el-tab-pane label='指示性图标' name='indicative'>
          <FxIconList @getIcon='getIcon' :icons='globalIcons.indicative' />
        </el-tab-pane>
        <el-tab-pane label='编辑类图标' name='edit'>
          <FxIconList @getIcon='getIcon' :icons='globalIcons.edit' />
        </el-tab-pane>
        <el-tab-pane label='数据类图标' name='data'>
          <FxIconList @getIcon='getIcon' :icons='globalIcons.data' />
        </el-tab-pane>
        <el-tab-pane label='网站通用图标' name='website'>
          <FxIconList @getIcon='getIcon' :icons='globalIcons.website' />
        </el-tab-pane>
        <el-tab-pane label='其他图标' name='others'>
          <FxIconList @getIcon='getIcon' :icons='globalIcons.others' />
        </el-tab-pane>
      </el-tabs>
      <div slot='footer' class='dialog-footer'>
        <el-button size='small' @click='dialogFormVisible = false'>取 消</el-button>
        <el-button size='small' type='primary' @click='confirmIcon'>确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>

import FxIconList from '@/pages/admin/components/FxIconList'
import globalIcons from '@/config/globalIcons'
import Sys_AdminService from '@/service/admin/Sys_AdminService'

export default {
  name: 'FxDrawer',
  components: {
    FxIconList
  },
  props: {
    title: {
      type: String,
      default: '新增'
    },
    dialog: {
      type: Boolean,
      default: false
    },
    direction: {
      type: String,
      default: 'rtl'
    },
    size: {
      type: String,
      default: '32%'
    },
    disabledSubmit: {
      type: Boolean,
      default: false
    },
    formData: {
      type: Object,
      default() {
        return {}
      }
    },
    menus: {
      type: Array,
      default() {
        return []
      }
    }
  },
  data() {
    return {
      globalIcons,
      dialogFormVisible: false,
      activeName: 'directivity',
      icon: '',
      ruleForm: this.formData,
      rules: {
        title: [
          { required: true, message: '请输入菜单名称', trigger: 'blur' }
        ],
        path: [
          { required: true, message: '请输入访问路径', trigger: 'blur' }
        ],
        component: [
          { required: true, message: '请输入前端组件', trigger: 'blur' }
        ],
        parent: [
          { required: true, message: '请输入父级菜单', trigger: 'blur' }
        ]
      }
    }
  },
  methods: {
    submitForm() {
      this.$refs.ruleForm.validate(async (valid) => {
        if (valid) {
          this.setPid()
          let res = null
          switch (this.title) {
            case '新增':
            case'添加子菜单':
              res = await Sys_AdminService.createMenu({menuData :this.ruleForm})
              break
            case '编辑':
              res = await Sys_AdminService.updateMenu({menuData :this.ruleForm})
              break
            default:
              break
          }
          if(res.data.status !== 200) return this.$message.error(res.data.message)
          this.$message.success(res.data.message)
          setTimeout(()=>{
            sessionStorage.removeItem('menus')
            this.$router.go(0)
          },1500)
        }
      })
    },
    resetForm() {
      this.$refs.ruleForm.resetFields()
    },
    sendClose() {
      this.$emit('closeDrawer')
    },
    selectIcon() {
      this.dialogFormVisible = true
    },
    getIcon(icon) {
      if (icon) this.icon = icon
    },
    confirmIcon() {
      this.dialogFormVisible = false
      this.ruleForm.icon = this.icon ? this.icon : ''
    },
    setPid() {
      if (this.ruleForm.type && this.ruleForm.parent) {
        this.ruleForm.pid = this.menus.find(item => item.title === this.ruleForm.parent).id
      } else {
        this.ruleForm.pid = ''
      }
    }
  },
  updated() {
    this.$nextTick(() => {
      this.ruleForm = this.formData
    })
  }
}
</script>

<style>
.el-select-dropdown__item.selected {
  color: rgb(250, 84, 28) !important;
}

.el-switch.is-checked .el-switch__core{
  border-color: rgb(234, 113, 72);
  background: rgb(250, 84, 28);
}
</style>

<style scoped>
>>> .el-drawer__header {
  margin-bottom: 20px;
  padding: 20px;
  border-bottom: 1px solid rgba(140, 147, 157, 0.4);
}

.fx-drawer__content {
  height: 100%;
  padding: 0 20px 20px;
}

.fx-ruleForm {
  position: relative;
  height: 94%;
  padding: 20px;
  border: 1px solid rgba(140, 147, 157, 0.4);
}

.fx-drawer__footer {
  position: absolute;
  left: 36%;
  bottom: 20px;
}

>>> .el-radio__input.is-checked + .el-radio__label {
  color: rgb(250, 84, 28);
}

>>> .el-radio__input.is-checked .el-radio__inner {
  border-color: rgb(234, 113, 72);
  background: rgb(250, 84, 28);
}

>>> .el-input__inner:focus {
  border-color: rgb(234, 113, 72);
  outline: 0;
}

>>> .el-dialog__header {
  padding: 0;
}

>>> .el-tabs__item {
  padding: 0 30px;
}

>>> .el-tabs--top .el-tabs__item.is-top:nth-child(2) {
  padding-left: 30px;
}

>>> .el-tabs__item:hover {
  color: rgb(250, 84, 28);
  transition: .3s;
}

>>> .el-tabs__item.is-active {
  color: rgb(250, 84, 28);
}

>>> .el-tabs__active-bar {
  background-color: rgb(250, 84, 28);
}
</style>
